Как используется ключевое слово as в Angular?

Ключевое слово as в Angular используется для создания псевдонима или временной переменной при работе с шаблонами. Оно позволяет назначить переменной новое имя для использования внутри шаблона. Давайте рассмотрим, как работает ключевое слово as в Angular:

Шаг 1: Использование as для псевдонима переменной

  • Ключевое слово as используется внутри конструкции ngFor для создания псевдонима переменной и предоставления более удобного доступа к свойствам элемента массива.
  • Рассмотрим пример с массивом пользователей, где каждый пользователь имеет свойства name и age: 
    <ul>
	<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
  • Если нам также нужно использовать возраст пользователя в шаблоне, мы можем использовать ключевое слово as для создания псевдонима переменной: 
    <ul>
	<li *ngFor="let user as currentUser of users">{{ currentUser.name }} ({{ currentUser.age }} years old)</li>
</ul>
  • Здесь currentUser является псевдонимом для user, и мы можем обращаться к свойствам currentUser внутри шаблона.

Шаг 2: Использование псевдонима переменной в условных операторах

  • Ключевое слово as также может быть использовано в условных операторах, таких как ngIf и ngSwitch, для доступа к псевдониму переменной.
  • Рассмотрим пример с условным оператором ngIf, где показывается элемент, только если пользователь является администратором: 
    <div *ngIf="user.role === 'admin' as isAdmin">Welcome, Admin!</div>
<div *ngIf="!isAdmin">You are not an admin.</div>
  • Здесь isAdmin является псевдонимом для user.role === 'admin', и мы можем использовать его в следующем условном операторе !isAdmin.

Ключевое слово as позволяет нам создавать псевдонимы переменных для более удобного доступа к данным внутри шаблонов. Оно полезно, когда нам нужно использовать дополнительные свойства или выполнять дополнительные проверки при работе с шаблонами Angular.